import { PureComponent } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Icon, Dropdown } from 'antd'
import menu from '../common/menu'
import MenuItem from 'antd/lib/menu/MenuItem'
import { Link } from 'dva/router'
import logo from '../assets/Logo.png'; //这样引入图片才有效
import person from '../assets/yay.png';
import styles from './mainLayout.less';

const { Header, Content, Sider } = Layout;
const SubMenu = Menu.SubMenu;
let parentData = []
for(var i = 0; i < menu.length; i++){
    parentData.push(menu[i].name)
}
console.log(parentData)
@connect(({ loading, example = {} }) => ({ //其中global={}表示global中的所有state
    commonList: example.commonList, //读取原有的state，即models中的global.js文件中的weather
    loading: loading.effects['example/getCommonListData'], //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))
export default class MainLayout extends PureComponent {
    state = {
        collapsed: false,
        openKeys: ['数据中心'],
        defaultSelectedKeys: ['运单数据'],
        showOpen: false,
    };
    componentDidMount() {
        console.log(menu)
        const { dispatch } = this.props
            dispatch({
              type: 'example/redirect',
              payload: {
                name: '/oderData'
              }
            })
            // dispatch({
            //   type: 'example/getCommonListData',
            //   payload: {}
            // })
        this.setState({ showOpen: true })
    }
    onCollapse = (collapsed) => {
            console.log(collapsed);
            this.setState({ collapsed });
        }
        // 点击二级子菜单
    handleClick = (e) => {
            // const { dispatch } = this.props
    }
        // 点击二级导航关闭当前菜单
    openMenu = (openKeys) => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (parentData.indexOf(latestOpenKey) === -1) {
          this.setState({ openKeys });
        } else {
          this.setState({
            openKeys: latestOpenKey ? [latestOpenKey] : [],
          });
        }

    }
    render() {
        const hiStatus = true
        const { openKeys, defaultSelectedKeys } = this.state
        const { commonList } = this.props
        const dropMenu = ( < Menu style = {{ width: '160px' } } >
            <Menu.Item >
            <a href = "/admin/" style = {{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }} >
            <Icon type = "logout" style = {{ margin: '0 5px 0 8px', color: 'rgba(0, 0, 0, 0.45)' }}/>
            退出登录 
            </a> 
            </Menu.Item > 
            </Menu>
        )
        return ( <Layout style = {{ minHeight: '100vh' }} >
            <Sider
            // collapsible
            // collapsed={this.state.collapsed}
            onCollapse = { this.onCollapse } >
            <div className = { styles.logo } style = {{ color: '#fff' }} >
            <img alt = "logo" src = { logo }/>
             <span > ·后台管理 </span>
             </div> { /* openKeys={openKeys}  defaultSelectedKeys={defaultSelectedKeys} openKeys={openKeys} */ }
            <Menu theme = "dark"
            mode = "inline"
            onClick = { this.handleClick }
            openKeys={openKeys}
            defaultSelectedKeys={defaultSelectedKeys}
            onOpenChange = { this.openMenu } > {
                menu.length && menu.map((item) => ( <SubMenu key = { item.name }
                    title = { < span > 
                    < Icon type = { item.icon }/>
                    <span>{item.name}</span > 
                    </span>} > 
                    {
                        item.children.map((item) => ( <MenuItem key = { item.name } >
                            <Link replace = { hiStatus }
                            to = { `/${item.path}` } > { /* <Icon type={item.icon} /> */ }
                             <span > { item.name } </span> 
                             </Link > </MenuItem>
                        ))
                    } </SubMenu>
                ))
            } 
            </Menu> 
            </Sider >
            <Layout >
            <Header style = {{ background: '#fff', padding: 0 }} className = { styles.header } >
            <div className={styles.headerLeft}>
                <Icon type="cloud-download" />
                <span className={styles.headerSpan} style={{marginRight: '25px'}}>我的下载</span>
                <Icon type="picture" />
                <span className={styles.headerSpan} style={{marginRight: '26px'}}>我的图片</span>
                <Dropdown overlay = { dropMenu }>
                <div className = { styles.person } >
                <img src = { person } alt = "" />
                <span > { commonList.userName ? commonList.userName : '用户名' } </span>
                </div>
                </Dropdown> 
                < Icon type = "global" style={{marginRight: '13px'}}/> 
            </div>
            </Header > 
            <Content style = {{ margin: '24px'}} > 
              { this.props.children } 
            </Content>
            </Layout > 
            </Layout>  
        )
    }
}

